<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${ctx }/resource/bootstrapjs/bootstrap.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="${ctx }/resource/bootstrapjs/bootstrap-paginator.js"></script>

<title>Insert title here</title>
</head>
<script type="text/javascript">

  function paging(page){
	  $.ajax({  
          type: "GET",  
          url: "${ctx }/user/Test", 
          dataType:'json',
          success: function(msg){ 
        	  var str="";
        	  for(var i=0;i<msg.length;i++){
        		  str+="<tr><td>"+msg[i].id+"</td><td>"+msg[i].user_id+"</td><td>"+msg[i].email+"</td><td><a href='' onclick=''>设置角色</a><a href='' onclick=''>删除用户</a></td></tr>";
        	  }
        	$("#table").html(str);
          }  
       });
	  
  }
  
  $(function(){
	  paging(1);
  });
  
  
</script>

<body>
<ol class="breadcrumb">
  <li><span class="glyphicon glyphicon-home"></span></li> 首页
  <li>系统管理</a></li>
  <li class="active">用户管理</li>
</ol>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation" >
   <div>
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="昵称">
             <input type="text" class="form-control" placeholder="email">
         </div>
         <button type="submit" class="btn btn-primary " style="text-shadow: black 5px 3px 3px;background: #00B2EE;">查询</button>
           &nbsp; 
         <button type="submit" class="btn btn-primary " style="text-shadow: black 5px 3px 3px;background: #00B2EE;"><span class="glyphicon-plus"></span>添加用户</button>
      </form> 
   </div>
</nav>
<table class="table table-bordered table-hover " style="margin:auto;width: 1010px;">
	<thead>
		<tr style=" background: #E0EEEE">
			<th scope="col" colspan="4">用户管理</th>
		</tr>
		<tr style=" background: #E0EEEE">
			<th width="40">ID</th>
			<th width="200">昵称</th>
			<th width="70">email</th>
			<th width="70">操作</th>
		</tr>
	</thead>
	<tbody id="table">
	</tbody>
</table>
<center>
 <div id="example"></div>
</center>
<script type='text/javascript'>
	var options = {

		currentPage: 1,

		totalPages: 10,

		numberOfPages:5,
		
		onPageClicked: function (e, originalEvent, type, page) {  
           paging(page); 
        }  

}
$('#example').bootstrapPaginator(options);
</script><span style="font-family:'sans serif, tahoma, verdana, helvetica';"><span style="white-space:normal;"> </span></span>
</body>
</html>